<!Doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ball {margin-left:0;width:150px;height:150px;border-radius:50%;background:rgba(0,0,255,.4);}
		#ball2{margin-left:0;width:150px;height:150px;border-radius:50%;background:rgba(255,0,0,.4);}
		.container{width:;height:150px;}
	</style>
</head>
<body>
	<div class="container"><div id="ball"></div></div>
	<div class="container"><div id="ball2"></div></div>	
	<input type="button" value="移动小球" id="btn">
	<input type="button" value="暂停移动" id="btn3">
	<input type="button" value="移动小球2" id="btn2">
	<input type="button" value="暂停移动2" id="btn4">
	<script>
		var btn = document.getElementById('btn');
		var btn3 = document.getElementById('btn3');
		var btn2 = document.getElementById('btn2');
		var btn4 = document.getElementById('btn4');
		var foo = ball('ball');
		var foo2 = ball('ball2');
		btn.onclick = foo.moveBall(20,500,4.5);
		btn3.onclick = foo.pauseBall;
		btn2.onclick = foo2.moveBall(40,800,1);
		btn4.onclick = foo2.pauseBall;   //注释：留意函数返回值，在引用函数，对象，对象的方法时
		function ball(id){
			var timer,ballScaleTimer,NowStep;
			var o = {
				moveBall: function (fps,end,scaleStep) {
					var ball = document.getElementById(id);
					function doMove () {
						clearInterval(timer);
						clearInterval(ballScaleTimer);						
						function scaleBoll(){
							var ballHeight = parseInt(window.getComputedStyle(ball).height);
							var ballWidth = parseInt(window.getComputedStyle(ball).width);
							if (ballWidth <=40){
								NowStep = Number(scaleStep);
							} else if (ballWidth>=150) {
								NowStep = -Number(scaleStep);
							}
							ball.style.width = ballWidth + NowStep + 'px';
							ball.style.height = ballHeight + NowStep + 'px';
						}
						function move () {
							var ballMarginLeft = parseFloat(window.getComputedStyle(ball).marginLeft);
							var ballNewMarginLeft;
							if (ballMarginLeft<end) {
								ballNewMarginLeft = ballMarginLeft + 1 ;
								ball.style.marginLeft = ballNewMarginLeft + 'px';
							}
						}
						var m = 1000/fps;    // frame per second 定义动画帧，应用在计时器
						timer = setInterval(move,m);
						ballScaleTimer = setInterval(scaleBoll,m);
					}
					return doMove;
				},
				pauseBall: function () {
					clearInterval(ballScaleTimer);						
					clearInterval(timer);
				}
			}
			return o;
		}
	</script>
</body>
</html>





